<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>富豪榜</title>
        <link rel="stylesheet" href="./index.css" />
    </head>

    <body>
        <!-- 导航栏 -->
        <nav>
            <ul>
                <li>主页</li>
                <li>排行榜</li>
                <li>联系方式</li>
            </ul>
        </nav>
        <!-- 头部内容 -->

        <header>
            <!-- 导航栏的按钮 -->
            <button id="toggle">导航栏</button>
            <!-- 标题 -->
            <h2>欢迎来到富豪排行榜</h2>
            <!-- 欢迎语句 -->
            <p>weclome to the rich rank</p>
            <!-- 登陆按钮 -->
            <button id="login">登陆</button>
        </header>
        <!-- 主题内容 -->
        <div class="container">
            <!-- 左盒子 -->
            <aside>
                <!-- 五个按钮 -->
                <button id="add-user">添加账户</button>
                <button id="double">资金翻倍</button>
                <button id="show-millionaire">查询百万富翁</button>
                <button id="sort">财富榜</button>
                <button id="calculate">计算总额</button>
            </aside>
            <!-- 右盒子 -->
            <main id="main">
                <h2>
                    <strong>Person</strong>
                    <span>Wealth</span>
                </h2>
            </main>
        </div>
        <script src="./util.js"></script>

        <script>
            //获取右边展示用的盒子
            var main = document.querySelector("#main");
            var dataInfo = [];
            async function getData() {
                const data = {
                    url: "http://localhost:3000/dataInfo",
                };
                dataInfo = await Pajax(data);
            }
            getData();
            // localStorage.setItem("users", JSON.stringify(hadInfo));
            //获取五个按钮
            var add_btn = document.querySelector("#add-user");
            var double_btn = document.querySelector("#double");
            var query_btn = document.querySelector("#show-millionaire");
            var most_btn = document.querySelector("#sort");
            var total_btn = document.querySelector("#calculate");
            //---
            //添加用户
            var arr = JSON.parse(localStorage.getItem("users")) || [];
            var num = arr.length; //数组第一个元素的下标
            updateDom(arr);
            add_btn.addEventListener("click", addfn);
            function addfn() {
                //点击一次 渲染一个对象，点第二次的时候，前一次的数据要保留
                // 多个数据 有序 ->用数组存放
                //点一次push到新数组中
                //遍历渲染
                arr.push(dataInfo[num]);
                num++;
                updateDom(arr);
            }
            //渲染用的函数
            function updateDom(arr) {
                localStorage.setItem("users", JSON.stringify(arr));
                //arr里面装的是我要渲染用的数据
                main.innerHTML = `
            <h2>
              <strong>Person</strong>
              <span>Wealth</span>
            </h2>
            `;
                //把上一次的清除

                //遍历数组，渲染到页面上
                arr.forEach(function (item, index) {
                    //item就是你要渲染的每个对象
                    var div = document.createElement("div");
                    div.classList.add("person");
                    div.innerHTML = `
                    <strong>${item.name}</strong>
                    ${formatMoney(item.money)}
              `;
                    main.appendChild(div);
                });
            }
            //翻倍
            double_btn.addEventListener("click", doublefn);
            function doublefn() {
                //要翻倍的是 新的arr中的对象中的money属性
                // //方法一 forEach
                // arr.forEach(function (item) {
                //   item.money *= 2;
                // });
                // updateDom(arr);

                //方法二 map+ ...扩展运算符
                arr = arr.map(function (item) {
                    return { ...item, money: item.money * 2 };
                });
                updateDom(arr);
            }
            //查询
            query_btn.addEventListener("click", queryfn);
            function queryfn() {
                //money>=100W才留下来
                arr = arr.filter(function (item) {
                    return item.money >= 1000000;
                });
                updateDom(arr);
                // console.log(arr);
            }
            //排序
            most_btn.addEventListener("click", mostfn);
            function mostfn() {
                arr = arr.sort(function (a, b) {
                    return b.money - a.money;
                });
                updateDom(arr);
            }
            //总额
            total_btn.addEventListener("click", totalfn);
            function totalfn() {
                //计算总金额
                var acc = arr.reduce(function (prev, item, index) {
                    return (prev += item.money);
                }, 0); //千万记得初始化一个0
                var div = document.createElement("div");
                div.innerHTML = `<h2><strong>Total sum:</strong>${formatMoney(
                    acc
                )}</h2>`;
                main.appendChild(div);
            }
            //格式化金钱
            function formatMoney(money) {
                // //调用数字对象上的一个方法
                // var res = money.toLocaleString();
                // return "$" + res + ".00";

                //方法二
                // arr=[123456]
                //  123,456
                //每循环第三次的时候，并且不是第0个元素，就在插入一个 逗号(,)
                var res;
                var arr = money.toString().split("");
                var newArr = [];
                var count = 0; //记录循环了几次
                for (var i = arr.length - 1; i >= 0; i--) {
                    count++;
                    newArr.unshift(arr[i]); //拿旧数组的最后一个元素 去插入到新数组的最前面
                    if (count % 3 === 0 && i != 0) {
                        newArr.unshift(",");
                    }
                }
                return "$" + newArr.join("") + ".00";
            }
            //侧边导航栏
            var nav_btn = document.querySelector("#toggle");
            nav_btn.addEventListener("click", function () {
                /*
            面试必问：涉及到性能优化
            1. 改变width  0=>200px =>改变了盒子的结构=>引起浏览器的重排(回流) 重新渲染  n个盒子都重新绘制
            2. 通过transform来做 或者改变一下背景色 =>只是改变盒子的外观=>引起浏览器的重新绘制(重绘) 只需要重新渲染改变的那个盒子
            */
                document.body.classList.toggle("show_nav");
            });
        </script>
    </body>
</html>
